<template>
  <div>
    <div class="cart-list">
      <div class="cart-item flex-a" :class="item.show ? 'show' : 'hidden'" v-if="state.collectList.length > 0"
        v-for="item in state.collectList" :key="item.goodsId"
        @click="jumpTo('/packageA/pages/productDetail/index?goodsId=' + item.goodsId)">
        <nut-card :img-url="item.goodsCoverImg" :title="item.goodsName" :price="item.sellingPrice"
          :vipPrice="item.originalPrice" :shopDesc="item.goodsIntro">
          <template #footer>
          </template>
        </nut-card>
      </div>
      <nut-empty v-else description="无数据"></nut-empty>
    </div>
  </div>
</template>

<script lang="ts">
import Taro, { useRouter } from '@tarojs/taro';
import { reactive, onMounted } from 'vue';
import { getGoodsListByUser } from '../../../../api/index'
export default {
  setup() {
    const state = reactive({
      collectList: [],
    });
    onMounted(() => {
      getGoodsListByUser().then(res => {
        if (res.resultCode == 200) {
          let list = res.data
          list.forEach(item => {
            item.show = item.originalPrice ? true : false
          })
          state.collectList = list
        }
      })
    });
    const jumpTo = (url) => {
      Taro.navigateTo({ url: url });
    }
    return { state, jumpTo };
  }
};
</script>
<style lang="scss">
.cart-list {
  padding: 20px;
  box-sizing: border-box;
  overflow-y: auto;

  .cart-item {
    margin-bottom: 20rpx;
    box-shadow: 0 0 20rpx 20rpx #f9f9f9;
    border-radius: 20rpx;

    .nut-tag {
      color: #FCB367;
      font-size: 26rpx;
      font-weight: 600;
      background: transparent;
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
    }

    .nut-card .nut-card__left {
      width: 160rpx;
      height: 160rpx;

      image {
        width: 100%;
        height: 100%;
        margin: 10%;
      }
    }

    .nut-card .nut-card__right {
      padding: 16rpx 20rpx;
      margin-left: 10rpx;
    }

    .nut-card__right__price__origin {
      display: none;
    }
  }

  .cart-item.show {
    .nut-card__right__price__origin {
      display: inline-block;

      view {
        text-decoration: line-through;
      }
    }
  }

  .cart-item.hidden {
    .nut-card__right__price__origin {
      display: none;

      view {
        text-decoration: line-through;
      }
    }
  }
}
</style>